<template>
  <div class="w-full p-4 relative h-full box-container">
    <div class="top py-4 px-2 ">
        <span @click="$router.back()">
          <img src="/images/backIcon2.png" alt="" />
          <span class="text-xl lg:text-2xl">返回</span>
        </span>
        <h2 class="text-3xl font-bold lg:text-4xl">历史记录</h2>
        <!-- <span @click="toHistory">
          <span
            class="text-xl text-[#1a0dab] hover:underline decoration-[#1a0dab] lg:text-2xl"
            >历史记录</span
          >
        </span> -->
      </div>
    <div class="flex justify-between mt-4">
      <el-form :inline="true" :model="searchForm" label-width="60px">
        <el-form-item  >
          <el-input class="w-40" v-model="searchForm.name" />
          <template #label>
            <div class="lg:text-[1.25rem]">姓名</div>
          </template>
        </el-form-item>
        <!-- <el-form-item label="标签">
          <el-input class="w-40" v-model="searchForm.tag" />
        </el-form-item> -->
      </el-form>
      <div class="flex justify-evenlly">
        <el-button type="primary" @click="onSubmit" >查询</el-button>
        <el-button  @click="onReset">重置</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      table-layout="fixed"
      style="width: 100%; text-align: center"
      empty-text="暂无数据"
      show-overflow-tooltip
      height="69vh"
      header-row-class-name="lg:text-xl"
      cell-class-name="text-center lg:text-xl"
      border
    >
      <el-table-column prop="name">
        <template #header>
          <div class="flex justify-center items-center font-bold text-black">
            <span class="ml-2.5 font-bold text-black">姓名</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="age">
        <template #header>
          <div class="flex justify-center items-center font-bold text-black">
            <span class="ml-2.5 font-bold text-black">年龄</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sex">
        <template #header>
          <div class="flex justify-center items-center font-bold text-black">
            <span class="ml-2.5 font-bold text-black">性别</span>
          </div>
        </template>
        <template #default="scope">
          <div>
            {{ ['','男','女'][scope.row.sex] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="created_at">
        <template #header>
          <div class="flex justify-center items-center font-bold text-black">
            <span class="ml-2.5 font-bold text-black">创建时间</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="stat" fixed="right">
        <template #header>
          <div class="flex justify-center items-center font-bold text-black">
            <span class="ml-2.5 font-bold text-black">操作</span>
          </div>
        </template>
        <template #default="scope">
          <el-button class="lg:text-xl" link type="primary" @click="handleEdit(scope.$index, scope.row)"
            >查看报告</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="my-5 flex justify-center overflow-x-hidden">
      <el-pagination
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :page-sizes="[10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script  setup>
import { onActivated, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import {fetchListReport} from "@/assets/api/index.js"



const router = useRouter()

let searchForm = reactive({
  name: '',
  // department_id: ''
})

const onSubmit = () => {
  getTPList()
  // console.log('submit!')
}
const onReset = () => {
  searchForm.name = ''
  getTPList()
}

const tableData = ref([])

const handleEdit = (index, row) => {
  // router.push(`/measure/p7?id=${row.id}`)
  // isEdit.value = true
  // editForm.value = { ...row }
  // editDialogVisible.value = true
  window.localStorage.setItem('fromHistory',1)
  window.localStorage.setItem('tongue_p_info',JSON.stringify({name:row.name,age:row.age,sex:row.sex}))
  window.localStorage.setItem('tongue_res',row.tongue_result)
    let {origin,pathname} = window.location
    window.open(`${origin}${pathname}#/tongue_report`,'_blank')
}

let totalData = []
const getTPList = async () => {
  let res = await fetchListReport({
    page:page.pageNum,
    limit:page.pageSize,
    ...searchForm
  })
  if (res.code !== 0) {
    return
  }
  tableData.value = res.data.data
  page.total = res.data.total
}





//**分页 */
const page = reactive({
  pageSize: 20,
  pageNum: 1,
  total: 0
})
const pageSize = ref(15)
const currentPage = ref(1)
const total = ref(15)

const handleSizeChange = (val) => {
  page.pageSize = val
  getTPList()
  // console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  page.pageNum = val
  getTPList()
  // console.log(`current page: ${val}`)
}

onMounted(() => {getTPList()})

</script>
<style scoped>
*{
  box-sizing: border-box;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.box-container .top {
    width: 100%;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* padding-right: 2rem; */
  }
  
  .top h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
  }
  
  .top > span {
    font-size: 1.5rem;
    /* color: rgb(72, 72, 247); */
    cursor: pointer;
    /* margin-right: 2.5rem; */
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .top > span > img {
    width: 2rem;
    margin-right: 10px;
  }
</style>
